<template>
  <div class="ert-container" >
    <!-- <div class="close-button" @click="closePanel">
      <i class="el-icon-close"></i>
    </div> -->
    <ul class="list-group list-group-striped">
      <li class="popup-group-item">
        <label>显示/隐藏</label>
        <div class="pull-left">
          <el-checkbox v-model="ertK.checked2"
            >电极点位</el-checkbox
          >
        </div>
      </li>
      <li class="popup-group-item">
        <label></label>
        <div class="pull-left">
          <el-checkbox v-model="ertK.checkedErro" 
            >标注异常</el-checkbox
          >
        </div>
      </li>
      <li class="popup-group-item">
        <label></label>
        <div class="pull-left">
          <el-checkbox v-model="ertK.checked3D"
            >三维模型</el-checkbox
          >
        </div>
      </li>
      <li class="popup-group-item">
        <label>颜色切换</label>
        <div class="pull-left colorSelect">
          <el-color-picker
            v-model="ertK.color"
            show-alpha
          ></el-color-picker>
        </div>
      </li>
      <li class="popup-group-item">
        <label>宽度</label>
        <div class="pull-left">
          <el-input-number
            class="numsty"
            v-model="ertK.width"
            :step="1"
            controls-position="right"
            size="mini"
            :min="1"
            :max="100"
          ></el-input-number>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "ertAttrPanel",
  props: {},
  data() {
    return {
      showPanel: false,
      ertK: {
        color: "rgba(255,0,0,1)",
        checked2: false,
        endTime: null,
        startTime: null,
        width: 5,
        sliderValue: 15,
        checked3D: false,
        checkedErro: false,
      },
    };
  },
  created() {},
  mounted() {
    console.log(this.$store);
  },
  methods: {
    show(val) {
      this.showPanel = val;
    },
    closePanel() {
      this.showPanel = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.ert-container {
  width: 100%;
  height: 100%;
  .close-button {
    width: 20px;
    height: 20px;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 6px;
  }
}
.popup-group-item {
  border: none;
  padding: 2px 0px;
  display: flex;
  align-items: center;
}
.popup-group-item {
  label {
    margin-left: 5%;
    display: inline-block;
    width: 20%;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}
.popup-group-item .pull-left {
  height: 40px;
  display: flex;
  align-items: center;
  text-align: left;
  width: 72%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  label {
    width: 100%;
  }
  .el-checkbox {
    // margin-top: 10px;
  }
  .numsty {
    width: 70px;
    margin-left: 5px;
    margin-right: 5px;
  }
  .sliderbox {
    width: 100%;
    padding: 0px 20px;
  }
}
</style>
